<template>
	<view>
       <myheader></myheader>
		<!-- 账号密码输入框 -->
		<view class="form">
			<view class="username">
				<input placeholder="请输入账户" v-model="username" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="passwd" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="btn" @tap="doLogin">登 录</view>
		
		</view>
		<!-- 第三方登录 -->
		<view class="oauth" v-if="isShowOauth">
			<view class="text">— 快速登录 —</view>
			<view class="list">
				<view @tap="oauthLogin('weixin')" v-if="showProvider.weixin" class="icon weixin"></view>
				<view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
				<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view>
				<!-- <view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				username: '',
				passwd:'',
				isShowOauth:false,
				showProvider:{
					weixin:false,
					qq:false,
					sinaweibo:false,
					xiaomi:false
				}
			}
		},
		onShow() {
			
		},
		onLoad() {
			//APP显示第三方登录
			// #ifdef APP-PLUS
				this.isShowOauth=true;
			// #endif
			
		}, 
		methods: {
			doLogin() {
				uni.hideKeyboard();
				//验证手机号码
				if(this.username==""){
					uni.showToast({
						title: '请输入账号',
						icon: "none"
					});
					return false;
					
				}
				if(this.passwd==""){
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
					return false;
					
				}
				uni.showLoading({
					title: '提交中...'
				})
			
				//登录提交
				uni.request({
					url: "https://bg.jswbgz.com/post/sys_user:hx_login", //仅为示例，并非真实接口地址。
					data:{
					user_name: this.username,
					password: this.passwd,
					
				},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'post',
					success: (res) => {
						uni.hideLoading()
						console.log(res)
						if (res.data.success) {
							uni.setStorage({
								key: 'UserList_valid',
								data: res.data.data,
								success: function() {
									uni.setStorageSync('login_time_valid', Date.now());
									uni.setStorageSync('token_valid', res.data.data.token);
									uni.showToast({
										title: '登录成功',
										icon: "none"
									});
									uni.navigateTo({
											url: '../Index/index'
									});
								}
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: "登录失败",
							icon: "none"
						});
						console.log('set error:' + JSON.stringify(e));
					}
				});

			}

		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
	
	.form {
		.res {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}
	.oauth{
		@media all and (max-height:150vw){
			display: none;
		}
		position: absolute;
		bottom: 50upx;
		width: 100%;
		.text{
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($color: #ffffff, $alpha: 0.8);
			font-size: 28upx;
		}
		.list{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;
			.icon{
				font-size:80upx;
				margin: 0 30upx;
			}
		}
	}
</style>
